<template>
  <div class="main-tabs">
    <template v-for="item in activeTabs" :key="item.id">
      <div class="tabs-item">
        <span
          class="name"
          :class="path === item.url ? 'active-name' : ''"
          @click="handleToMenu(item.url)"
          >{{ item.name }}</span
        >
        <el-icon :size="12" @click="onDeleteMenu(item)"><Close /></el-icon>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { toRefs, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import userMainStore from '@/store/main/main'
import { mapPathToMenu } from '@/utils/map-menus'
import useLoginStore from '@/store/login/login'

const mainStore = userMainStore()
const { activeTabs } = storeToRefs(mainStore)
const route = toRefs(useRoute())
const router = useRouter()
const path = route.path
function handleToMenu(url: string) {
  router.push(url)
}

//用户刷新时把当前页面的tabs添加进去
const loginStore = useLoginStore()
const userMenus = loginStore.userMenus
onMounted(() => {
  const initRote = useRoute()
  const currentMenu = mapPathToMenu(initRote.path, userMenus)
  mainStore.changeTabs(currentMenu)
})

// 用户删除选中的tabs
function onDeleteMenu(item: any) {
  mainStore.deleteTabs(item)
}
</script>
<style lang="less" scoped>
.main-tabs {
  display: flex;
  .tabs-item {
    display: flex;
    align-items: center;
    margin: 0 6px;
    background-color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 0 16px;
    cursor: pointer;
    line-height: 38px;
    font-size: 14px;
    .name {
      margin-right: 8px;
      color: #000000a6;
    }
    .active-name {
      color: #1890ff;
    }
  }
}
</style>
